<template>
  <div class="demo">
      <h2>机构：{{name}}</h2> 
      <h2>地址：{{address}}</h2>
  </div>
</template>

<script>
// (1) 要使用下载的第三方库，都需要引入一下
import pubsub from 'pubsub-js'

export default {
  name:'MySchool',
  data(){
    return{
       name:'尚硅谷',
       address:'北京昌平',
    }
  },
    mounted() {
      //  this.$bus.$on('hello',(data)=>{
      //     console.log('我是School组件，我收到了data：'+data);
      //  })

      /**
       * (2) 接收消息的是订阅者，使用subscribe
       *     第一个参数是 消息名，第二个参数是 回调函数
       *                                    回调函数第一个参数是还是消息名，第二个是 消息内容
       * (3) 接收者就像观察者一样，静观其变，因此要提前订阅(放在mounted函数里面)
       * (4) 销毁订阅是默认按照消息id来销毁的，为了方便获取id，直接this.添加
       * (5) 销毁的是订阅而不是发布是因为 发布可能是对很多人订阅的，一般要持续给其他人使用
       *     而订阅只是其中一个用户，不想要它的消息就取消
       * (6) 由于是引入的第三方库，这里pubsub.里面的回调函数按道理来说是pubsub实例
       *     但是这是在Vue环境里，Vue根本不认，不会去找第三方库里面的实例
       *     Vue只会找Vue环境里存在的构造函数的实例
       *  */ 
      this.pubId = pubsub.subscribe('hello',(a,b)=>{
          console.log('School消息订阅的回调被调用了!',a,b);
      })
   }, 
   beforeDestroy(){
      pubsub.unsubscribe(this.pubId)
   }
   
}
</script>

<style scoped>
  .demo{
     background-color: brown;
     padding: 5px;
  }
</style>